<template>
  <v-container flat id="card">
    <!---分类按钮--->
    <v-row class="hidden-lg-and-up" no-gutters>
      <v-col class="pa-1" v-for="buttons in solts" :key="buttons">
        <v-hover v-slot:default="{ hover }">
          <router-link :to="buttons.src">
            <v-card :elevation="hover ? 15 : 1" :color="buttons.color" class="pa-1">
              <div class="text-center mt-4">
                <v-icon color="white large" x-large>{{buttons.icon}}</v-icon>
              </div>
              <p class="white--text text-center .subtitle-2">{{buttons.text}}</p>
            </v-card>
          </router-link>
        </v-hover>
      </v-col>
    </v-row>
    <v-container class="pl-4 pr-4" fluid>
      <!---轮播---->
      <v-row class="d-none d-sm-flex" align="start" justify="center" no-gutters>
        <v-col cols="11" class="pr-4">
          <v-hover v-slot:default="{ hover }">
            <v-card :elevation="hover ? 15 : 1">
              <v-carousel hide-delimiter-background show-arrows-on-hover cycle fluid>
                <v-carousel-item v-for="item in items" :key="item" :src="item.src">
                  <template v-slot:placeholder>
                    <v-row class="fill-height ma-0" align="center" justify="center">
                      <v-progress-circular indeterminate color="primary"></v-progress-circular>
                    </v-row>
                  </template>
                </v-carousel-item>
              </v-carousel>
            </v-card>
          </v-hover>
        </v-col>
        <!---lg以上的按钮--->
        <v-col cols="1" class="hidden-md-and-down">
          <v-row v-for="button in btns" :key="button" no-gutters>
            <v-col class="pb-2">
              <v-hover v-slot:default="{ hover }">
                <router-link :to="button.src">
                  <v-card
                    :elevation="hover ? 15 : 1"
                    :color="hover ? button.color : ''"
                    class="pa-3"
                  >
                    <div class="text-center mt-4">
                      <v-icon :color="hover ? 'white large' : ' large'" x-large>{{button.icon}}</v-icon>
                    </div>
                    <p
                      class="text-center .subtitle-2"
                      :style="hover ? 'color:white':''"
                    >{{button.text}}</p>
                  </v-card>
                </router-link>
              </v-hover>
            </v-col>
          </v-row>
        </v-col>
      </v-row>
    </v-container>

    <v-container fluid>
      <!---移动端轮播--->
      <v-row v-if="$vuetify.breakpoint.xsOnly" max-height="300px">
        <v-col max-height="300px">
          <v-hover v-slot:default="{ hover }">
            <v-card :elevation="hover ? 15 : 1" height="300px">
              <v-carousel hide-delimiter-background show-arrows-on-hover cycle height="300px">
                <v-carousel-item
                  v-for="item2 in items"
                  :key="item2"
                  :src="item2.src"
                  height="300px"
                >
                  <template v-slot:placeholder>
                    <v-row class="fill-height ma-0" align="center" justify="center">
                      <v-progress-circular indeterminate color="primary"></v-progress-circular>
                    </v-row>
                  </template>
                </v-carousel-item>
              </v-carousel>
            </v-card>
          </v-hover>
        </v-col>
      </v-row>
      <!---lg以下的按钮--->
      <v-row class="hidden-lg-and-up" no-gutters>
        <v-col class="pa-1" v-for="buttons1 in btns" :key="buttons1">
          <v-hover v-slot:default="{ hover }">
            <router-link :to="buttons1.src">
              <v-card :elevation="hover ? 15 : 1" :color="hover ? buttons1.color : ''" class="pa-1">
                <div class="text-center mt-4">
                  <v-icon :color="hover ? 'white large' : ' large'" x-large>{{buttons1.icon}}</v-icon>
                </div>
                <p
                  class="text-center .subtitle-2"
                  :style="hover ? 'color:white':''"
                >{{buttons1.text}}</p>
              </v-card>
            </router-link>
          </v-hover>
        </v-col>
      </v-row>
    </v-container>

    <p class="display-1 ma-4">{{$t("message.recentvideos")}}</p>
    <v-container v-if="$vuetify.breakpoint.xsOnly" fluid>
      <!----手机端卡片生成---->
      <v-row align="start" justify="center">
        <v-hover
          v-slot:default="{ hover }"
          v-for="card in cards"
          :key="card"
          flex
          class="ml-1 mr-1 mt-4 mb-4"
        >
          <v-card :elevation="hover ? 15 : 2" id="card" class="ml-2 mr-2">
            <v-hover v-slot:default="{ hover }">
              <v-img class="white--text" height="200px" :src="card.pic">
                <v-expand-transition>
                  <div
                    v-if="hover"
                    class="d-flex transition-fast-in-fast-out black darken-4 v-card--reveal title white--text"
                    style="height: 100%;"
                  >
                    <p class="pa-4">{{card.text}}</p>
                    
                  </div>
                </v-expand-transition>
                <template v-slot:placeholder>
                  <v-row class="fill-height ma-0" align="center" justify="center">
                    <v-progress-circular indeterminate color="primary"></v-progress-circular>
                  </v-row>
                </template>
              </v-img>
            </v-hover>
            <v-card-text class="title pt-4" style="position: relative;">
                  <router-link :to="{name:'group',query:{gid:card.gid,index:1}}">
                    <v-btn absolute color="primary" class="white--text" fab large right top>
                      <v-icon>mdi-play</v-icon>
                    </v-btn>
                  </router-link>
                  <p class="text-truncate">{{card.name}}</p>
                </v-card-text>
            <v-card-actions>
              <v-tooltip bottom>
                <template v-slot:activator="{ on }">
                  <v-icon v-on="on">mdi-play</v-icon>
                </template>
                <span>播放量</span>
              </v-tooltip>
              <v-text>{{card.played}}</v-text>
              <v-tooltip bottom>
                <template v-slot:activator="{ on }">
                  <v-icon class="ml-4" v-on="on">mdi-star-face</v-icon>
                </template>
                <span>收藏</span>
              </v-tooltip>
              <v-text class="ml-2">{{card.favor}}</v-text>
              <v-spacer></v-spacer>
              
            </v-card-actions>
          </v-card>
        </v-hover>
      </v-row>
    </v-container>

    <v-container class="pa-2 d-none d-sm-flex">
      <!----卡片生成---->

      <v-row align="start" justify="center" no-gutters>
        <v-card class="ma-2" v-for="card1 in cards" :key="card1" flex>
          <v-lazy>
            <v-hover v-slot:default="{ hover }">
              <v-card :elevation="hover ? 15 : 2" id="card" max-width="300px">
                <v-hover v-slot:default="{ hover }">
                  <v-img class="white--text" height="200px" :src="card1.pic">
                    <v-expand-transition>
                      <div
                        v-if="hover"
                        class="d-flex transition-fast-in-fast-out black darken-4 v-card--reveal white--text title"
                        style="height: 100%;"
                      >
                        <p class="pa-4">{{card1.text}}</p>
                      </div>
                    </v-expand-transition>
                    <template v-slot:placeholder>
                      <v-row class="fill-height ma-0" align="center" justify="center">
                        <v-progress-circular indeterminate color="primary"></v-progress-circular>
                      </v-row>
                    </template>
                  </v-img>
                </v-hover>
                <v-card-text class="title pt-4" style="position: relative;">
                  <router-link :to="{name:'group',query:{gid:card1.gid,index:1}}">
                    <v-btn absolute color="primary" class="white--text" fab large right top>
                      <v-icon>mdi-play</v-icon>
                    </v-btn>
                  </router-link>
                  <p class="text-truncate">{{card1.name}}</p>
                </v-card-text>
                <v-card-actions>
                  <v-tooltip bottom>
                    <template v-slot:activator="{ on }">
                      <v-icon v-on="on">mdi-play</v-icon>
                    </template>
                    <span>播放量</span>
                  </v-tooltip>
                  <v-text>{{card1.played}}</v-text>
                  <v-tooltip bottom>
                    <template v-slot:activator="{ on }">
                      <v-icon class="ml-4" v-on="on">mdi-star-face</v-icon>
                    </template>
                    <span>收藏</span>
                  </v-tooltip>
                  <v-text class="ml-2">{{card1.favor}}</v-text>
                  <v-spacer></v-spacer>
                  
                </v-card-actions>
              </v-card>
            </v-hover>
          </v-lazy>
        </v-card>
      </v-row>
    </v-container>
    <div class="text-center">
      <v-pagination v-model="page" :length="pages"></v-pagination>
    </div>
  </v-container>
</template>

<script>
export default {
  data: () => ({
    items: null,
    cards: null,
    page: 1,
    pages: 1,
    pageitems: 10
  }),
  computed: {
    btns: {
      get: function() {
        return [
          {
            text: this.$t("message.RankAll"),
            src: "/",
            icon: "mdi-equalizer",
            color: "pink"
          },
          {
            text: this.$t("message.teachers"),
            src: "/",
            icon: "mdi-teach",
            color: "green"
          },
          {
            text: this.$t("message.search"),
            src: "/search",
            icon: "mdi-magnify",
            color: "blue"
          },
          {
            text: this.$t("message.random"),
            src: "/",
            icon: "mdi-dice-multiple",
            color: "orange"
          }
        ];
      }
    },
    solts: {
      get: function() {
        return [
          {
            text: ""
          }
        ];
      }
    }
  },

  components: {},
  methods: {
    init() {
      this.carousel();
      this.card();
      this.getpages();
    },
    getpages() {
      this.$axios({
        method: "get",
        url: "http://47.100.137.177:8080/YimooBP1.0/mycountall!group"
      })
        .then(response => {
          if (response.data % this.pageitems != 0) {
            this.pages = response.data / this.pageitems + 1;
          } else {
            this.pages = response.data / this.pageitems;
          }

          console.log(response.data);
        })
        .catch(resp => {
          console.log("请求失败：" + resp.status + "," + resp.statusText);
        });
    },
    carousel() {
      this.$axios({
        method: "get",
        url: "http://47.100.35.226/php/carousel.php"
      })
        .then(response => {
          this.items = response.data;
          console.log(response.data);
        })
        .catch(resp => {
          console.log("请求失败：" + resp.status + "," + resp.statusText);
        });
    },
    card() {
      var Bean = new URLSearchParams();
      Bean.append("showGroupBean.limit", this.pageitems);
      Bean.append("showGroupBean.page", this.page);
      this.$axios({
        method: "post",
        url: "http://47.100.137.177:8080/YimooBP1.0/myshowgroups",
        data: Bean
      })
        .then(response => {
          this.cards = JSON.parse(response.data);
          console.log(response.data);
        })
        .catch(resp => {
          console.log("请求失败：" + resp.status + "," + resp.statusText);
        });
    }
  },
  mounted() {
    this.init();
  },
  watch: {
    page: function() {
      this.card();
    }
  }
};
</script>

<style>
</style>
